<!--
 - @author: linwen linwen@fjxhx.com.
 - @createDate: 2020-04-14 16:03.
 - @file: nav bar tab切换效果 .
 - @copyRight © 2020年 新和兴.All rights reserved.
-->
<template>
    <view class="nav-bar-wrap">
      <view class="status-type-wrap">
        <view class="status-list" ref="statusList">
          <view class="status-item"
              :class="{'active': activeFlag === index }"
              v-for="(item, index) in switchData"
              @click="switchStatus(item, index)">
            {{item.name}}
          </view>
        </view>
      </view>
    </view>
</template>

<script>
  export default {
    name: 'navBar',
    data() {
      return {
      }
    },
    props: {
      switchData: {
        type: Array,
        default: () => {
          let result = [
            {
              name: '全部',
              flag: 'all'
            },
            {
              name: '今日在岗',
              flag: 'today'
            },
            {
              name: '体温异常',
              flag: 'abnormal'
            },
            {
              name: '即将到期',
              flag: 'due'
            },
            {
              name: '已到期',
              flag: 'expired'
            }
          ]
          return result
        }
      },
      activeFlag: {
        type: Number,
        default: 0
      }
    },
    methods: {
      switchStatus(item, index) {
        console.log('item', item)
        this.$emit('switchStatus', item.flag, index)
      }
    }
  }
</script>

<style scoped lang="scss">
 .nav-bar-wrap {
	    margin-top: 44px;
   /* 状态选择 */
   .status-type-wrap {
     width: 100%;
     padding: 2rem 1rem;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     .status-list {
       box-sizing: border-box;
       display: flex;
       flex-flow: row nowrap;
       justify-content: center;
       align-items: center;
       .status-item {
         width: 20%;
         height: 30px;
         line-height: 28px;
         text-align: center;
         color:  #44D696;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .status-item:nth-of-type(1) {
         border-top-left-radius: 30px;
         border-bottom-left-radius: 30px;
         border-right: none;
       }
       .status-item:last-child{
         border-top-right-radius: 30px;
         border-bottom-right-radius: 30px;
         border-left: none;
       }
       .status-item:nth-child(odd) {
         border: 1px solid #44D696;
       }
       .status-item:nth-child(even) {
         border-top: 1px solid #44D696;
         border-bottom: 1px solid #44D696;
       }
       .active {
         color: #fff;
         background-color: #44D696;
       }
     }
   }
 }
</style>
